<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>comment</title>
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.6.10/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="../js/jquery-easyui-1.6.10/themes/icon.css" />
    <script type="text/javascript" src="../js/jquery-easyui-1.6.10/jquery.min.js"></script>
    <script type="text/javascript" src="../js/jquery-easyui-1.6.10/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.min.js"></script>
</head>

<body>
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'west',split:true" title="West" style="width:200px;">
            <ul id="tt"></ul>

        </div>
        <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
            <table id="dg"></table>
        </div>
    </div>
    <div id="dlg" class="easyui-dialog" title="数据操作" data-options="iconCls:'icon-save',closed:true" style="width:600px;height:400px;padding:10px">
        <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="cateId" style="width:100%" data-options="label:'分类id:'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="_id" style="width:100%" data-options="label:'新闻id:'">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="content" style="width:100%" data-options="label:'评论内容:',required:true">
            </div>
            <div style="margin-bottom:20px">
                <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'评论人:',required:true">
            </div>
        </form>
        <div style="text-align:center;padding:5px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>

</body>

</html>
<script>
    $('#tt').tree({
        url: 'http://localhost:3000/cate/list/1',
        method: 'post',
        onClick: function(node) {
            var cateIds = node._id;
            var titles = node.text;
            console.log(cateIds);
            console.log(titles);
            var children = $('#tt').tree('isLeaf', node.target);
            if (children) {
                $('#dg').datagrid({
                    url: 'http://localhost:3000/comment/list',
                    method: 'post',
                    queryParams: {
                        cateId: cateIds
                    },
                    fit: true,
                    pagination: true,
                    toolbar: [{
                        text: '添加评论',
                        iconCls: 'icon-add',
                        handler: function() {
                            $('#dlg').dialog('open');
                            $.ajax({
                                url: `http://localhost:3000/cate/${cateIds}`,
                                type: 'get'
                            }).done(res => {
                                console.log(res);
                                $('#ff').form('load', {
                                    cateId: res._id
                                }); //读取记录填充到表单中
                                $('#dlg').dialog('open');
                            });
                        }
                    }, '-', {
                        text: '删除评论',
                        iconCls: 'icon-cut',
                        handler: function() {
                            deleteDatas();
                        }
                    }],
                    columns: [
                        [{
                            field: 'ck',
                            checkbox: true
                        }, {
                            field: 'content',
                            title: '评论内容',
                            width: 400
                        }, {
                            field: 'name',
                            title: '评论人',
                            width: 200
                        }, {
                            field: '_id',
                            title: '操作',
                            width: 80,
                            formatter: function(value, row, index) {
                                //console.log(row); //输出数据行
                                return `<a href="#" onclick="editData('${
              row._id
            }')">修改</a> <a href="#" onclick="deleteData('${
              row._id
            }')">删除</a>`;
                            }
                        }]
                    ],
                    /* onClickRow: function(index, row) {
                        console.log(index, row);//输出数据
                    } */
                    onDblClickRow: function(index, row) {
                        console.log(index, row); //输出数据，双击才有效果
                    }
                });
            } else {
                alert('操作错误！！！');
            }
            /* $.ajax({
                url: 'http://localhost:3000/cate/list',
                type: 'post',
                data: {
                    cateId: cateIds
                }
            }).done(res => {
                console.log(res);
                //$('#dg').datagrid('loadData', res); //将接收到的数据放到#dg框

            }); */

        }
    });

    function clearForm() {
        $('#ff').form('clear');
        $('#dlg').dialog('close');
    };

    function submitForm() {
        $('#ff').form('submit', {
            onSubmit: function() {
                var formData = $('#ff').serializeJSON();
                console.log(formData);
                if ($('#ff').serializeJSON()._id) {
                    if ($(this).form('enableValidation').form('validate')) {
                        $.ajax({
                            url: `http://localhost:3000/comment/${formData._id}`,
                            type: 'put',
                            data: formData
                        }).done(res => {
                            console.log(res); //添加成功
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                            $('#ff').form('clear'); //清空
                        })
                    }
                } else {
                    delete formData._id;
                    if ($(this).form('enableValidation').form('validate')) {
                        $.ajax({
                            url: 'http://localhost:3000/comment',
                            type: 'post',
                            data: formData
                        }).done(res => {
                            console.log(res); //添加成功
                            $('#dlg').dialog('close');
                            $('#dg').datagrid('reload');
                            $('#ff').form('clear');
                        })
                    }
                }
                return false;
            }


        });
    }

    function editData(id) {

        $.ajax({
            url: `http://localhost:3000/comment/${id}`,
            type: 'get'
        }).done(res => {
            //console.log(res);
            $('#ff').form('load', res); //读取记录填充到表单中
            $('#dlg').dialog('open');
        })

    };

    function deleteData(id) {
        $.messager.confirm('确认框', '你确认要删除这条数据吗?', function(r) {
            if (r) {
                $.ajax({
                    url: `http://localhost:3000/comment/${id}`,
                    type: 'delete'
                }).done(res => {
                    // console.log(res); //输出删除的内容
                    $('#dg').datagrid('reload');
                });
            }
        });

    };

    function deleteDatas() {
        var dgSelections = $('#dg').datagrid('getSelections');
        //console.log(dgSelections);
        if (dgSelections[0]) {
            $.messager.confirm('确认框', '你确认要删除数据吗?', function(r) {
                if (r) {
                    for (var i = 0; i < dgSelections.length; i++) {
                        $.ajax({
                            url: `http://localhost:3000/comment/${dgSelections[i]._id}`,
                            type: 'delete'
                        }).done(res => {
                            $('#dg').datagrid('reload');
                        })
                    }
                }
            });
        } else {
            $.messager.confirm('确认框', '请选中数据');
        }

    };
</script>